<template>
<div class="front">
  <main>
    <div class="container_avatar">
      <img :src="useravatar_url">
    </div>
    <div class="container">
      <input type="text" placeholder="请设置用户名" v-model="username">
      <span class="left"></span>
      <span class="right"></span>
      <span class="top"></span>
      <span class="bottom"></span>
    </div>
    <div class="container_second">
      <input type="password" placeholder="请设置密码" v-model="userpassword">
      <span class="left"></span>
      <span class="right"></span>
      <span class="top"></span>
      <span class="bottom"></span>
    </div>
    <div class="container_third">
      <input type="password" placeholder="请确认密码" v-model="userpassword_confirm">
      <span class="left"></span>
      <span class="right"></span>
      <span class="top"></span>
      <span class="bottom"></span>
    </div>
    <div class="container_btn">
      <button @click="signIn">点击注册</button>
      <button @click="giveUp">放弃注册</button>
    </div>
    <br>
  </main>
  <div class="circle1"></div>
  <div class="circle2"></div>
</div>
</template>

<script>
import axios from "axios";
export default {
  name: "SignInView",
  data(){
    return{
      username: '',
      useravatar_url: require('../assets/avatar.png'),
      userpassword: '',
      userpassword_confirm: '',
      userid: '',
    }
  },
  mounted() {},
  methods: {
    signIn(){
      if(this.userpassword === '' || this.username === ''){
        this.$notify({
          message: '请填写必要信息'
        });
      }
      else if(this.userpassword !== this.userpassword_confirm){
        this.$notify({
          message: '两次输入密码不一致，请重新输入'
        });
        this.userpassword = '';
        this.userpassword_confirm = '';
      }
      else {
        //密码长度至少6位，！！至少包含一个小写、一个大写、一个数字、和@#_中的一个
        let pattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[@#_]).*$/;
        if (pattern.test(this.userpassword)) {
          axios.post("http://81.70.70.110:4396/account/register", null,
              {params: {password: this.userpassword, userName: this.username}, headers: {}
              }).then(res => {
            console.log(res);
            let j = res.data;
            if (j.code === 200) {
              //告诉用户他被分配的Id
              this.$alert('欢迎使用唠嗑~','您的唠嗑号: ' + j.data.userId,  {
                confirmButtonText: '记住了',
              });
              this.$router.push({path: '/'});
            } else if(res.code === 201){
              this.$message.error({
                message: "该账户已存在",
                center: true
              });
              this.username = '';
              this.userpassword = '';
              this.userpassword_confirm = '';
            } else{
              this.$message.error({
                message: "注册账户失败",
                center: true
              });
              this.username = '';
              this.userpassword = '';
              this.userpassword_confirm = '';
            }
          }).catch(err => {
            console.log(err);
          })
        }
        else{
          this.$notify({
            message: '密码长度最少6位，至少包括1个大写字母，1个小写字母，1个数字，1个特殊字符(@#_)，请调整'
          });
          this.userpassword = '';
          this.userpassword_confirm = '';
        }
      }
    },
    giveUp(){
      this.$router.push({path: '/'});
    },
  },
}
</script>

<style scoped>
.front{
  min-height: 100vh;
  background: linear-gradient(to right top, #65dfc9, #6cdbeb);
  display: flex;
  align-items: center;
  justify-content: center;
}
main {
  min-height: 60vh;
  width:55%;
  border-radius: 2rem;
  text-align:center;
  background: rgba(255,255,255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
main::after {
  background-color: rgba(255,255,255,.3);
  filter: blur(5px);
}
.container_avatar{
  position: absolute;
  top: 22vh;
  height: 19vh;
  width: 19vh;
}
img{
  width:100%;
  height:100%; 
  border-radius:11vh;
}
.container{
  position: absolute;
  top: 43vh;
  height: 5.5vh;
  width: 35%;
}
.container_second{
  position: absolute;
  top: 51vh;
  height: 5.5vh;
  width: 35%;
}
.container_third{
  position: absolute;
  top: 59vh;
  height: 5.5vh;
  width: 35%;
}
.container_btn{
  position: absolute;
  top: 67vh;
  height: 7vh;
  width: 35%;
  left: 33vw;
}
p{
  width:100%;
  height:100%;
  position: relative;
  font-size:1.3vh;
}
input{
  width:100%;
  height: 100%;
  position: relative;
  outline: none;
  border: none;
  box-sizing: border-box;
  padding-left: 5px;
  color: #31c6ef;
  background: rgba(255,255,255, .3);
}
span{
  position: absolute;
  content: "";
  display: block;
  background-color: #6cdbeb;
  transition: transform .1s ease-in-out;
}
.top,
.bottom{
  left: 0px;
  right: 0px;
  height:1.5px;
}

.left,
.right{
  top: 0px;
  bottom: 0px;
  width: 2px;
  transform: scaleY(0);
}
.bottom{
  bottom: 0px;
}
.right{
  right: 0px;
  transform-origin: top center;
  transition-delay: .1s;
}
.top{
  top:0px;
  transform: scaleX(0);
  transform-origin: left center;
  transition-delay: .2s;

}
.left{
  left:0px;
  transform-origin: bottom center;
  transition-delay: .3s;
}
input:focus ~ .right {
  transform: scaleY(1);
  transform-origin: bottom center;
}

input:focus ~ .left {
  transform: scaleY(1);
  transform-origin: top center;
}

input:focus ~ .top {
  transform: scaleX(1);
  transform-origin: right center;
}

button:first-child{
  height: 100%;
  width: 44%;
  border-radius: 1.5vh;
  border: none;
  outline: none;
  font-size: 2.3vh;
  letter-spacing: 2px;
  cursor: pointer;
  position:relative;
  background: rgba(255,255,255, .3);
  right:2vh;
}
button:last-child{
  height: 100%;
  width: 44%;
  border-radius: 1.5vh;
  border: none;
  outline: none;
  font-size: 2.3vh;
  letter-spacing: 2px;
  cursor: pointer;
  position:relative;
  background: rgba(255,255,255, .3);
}
button:first-child:hover{
  background: linear-gradient(90deg, #3ca8eb, #65dfc9, #f2369d, #14dff5);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite;
}
button:last-child:hover{
  background: linear-gradient(90deg, #83c4ec, #ec23c4,#e19cf8);
  background-size: 400%;
  z-index: 1;
  animation: glow 8s linear infinite;
}
button:before{
  content: '';
  position: absolute;
  background:inherit;
  top: -0.5vh;
  right: -0.5vh;
  bottom: -0.5vh;
  left: -0.5vh;
  border-radius: 2vh;
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s;
}
button:hover:before{
  opacity: 1;
  z-index: -1;
}


.circle1,
.circle2{
  background: white;
  background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.3));
  height: 17vh;
  width: 17vh;
  position: absolute;
  border-radius: 50%;
}

.circle1{
  top: 14%;
  right: 18%;
}


.circle2{
  bottom: 14%;
  left:18%;
}
</style>


